﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrapadmin.css" rel="stylesheet" />
    <script src="js/axios.js"></script>
    <script src="js/beetlex4axios.js"></script>
    <script src="js/vue.js"></script>

    <!-- 引入组件库 -->
    <!--<script src="models/menu.js"></script>
    <script src="models/windowsbar.js"></script>
    <script src="models/footer.js"></script>
    <script src="models/home.js"></script>
    <script src="models/about.js"></script>
    <script src="models/customers.js"></script>
    <script src="models/employees.js"></script>
    <script src="models/orders.js"></script>
    <script src="models/employeedetail.js"></script>
    <script src="models/customerdetail.js"></script>
    <script src="models/panel.js"></script>
    <script src="models/neworders.js"></script>
    <script src="models/monthline.js"></script>
    <script src="models/customerspie.js"></script>
    <script src="models/employeespie.js"></script>-->

    <script src="models/_models.js"></script>
    <script src="js/echarts.js"></script>
    <title>BeetleX AdminUI</title>
</head>
<body>
    <div id="page">
        <main_menu @menu_resize="OnMenuResize($event)" @openwindow="OnOpenWindow($event)"></main_menu>
        <windows_bar :windows="windows" :full="full" :selectwindow="selectWindow.id" @close="OnCloseWindows($event)"></windows_bar>
        <div class="main-content" :style="{left:(full=='max'?'60px':'260px')}">
            <keep-alive>
                <component :is="selectModel" @openwindow="OnOpenWindow($event)" :token="selectWindow.data" :winsize="sizeVersion"></component>
            </keep-alive>
        </div>
        <page_footer></page_footer>
    </div>
    <script>
       
        var model = {
            full: 'min',
            windows: [],
            selectWindow: {
            },
            selectModel: '',
            sizeVersion: 1,
        };
        var page = new Vue({
            el: '#page', data: model,
            methods: {
                OnMenuResize: function (event) {
                    this.full = event;
                    this.OnResize();
                },

                OnCloseWindows: function (e) {
                    var index = -1;
                    for (i = 0; i < this.windows.length; i++) {
                        if (this.windows[i].id == e.id) {
                            index = i;
                            break;
                        }
                    }
                    if (index >= 0) {
                        this.windows.splice(index, 1);
                        if (this.windows.length > 0)
                            this.OnOpenWindow(this.windows[0]);
                        else {
                            this.selectWindow = null;
                            this.selectModel = null;
                        }
                    }

                },

                OnOpenWindow: function (e) {
                    var has = false;
                    for (i = 0; i < this.windows.length; i++) {
                        var item = this.windows[i];
                        if (item.id == e.id)
                            has = true;
                    }
                    if (has == false) {
                        this.windows.push(e);
                    }
                    this.selectWindow = e;
                    this.selectModel = e.model;
                },
                OnResize: function () {
                    this.sizeVersion = this.sizeVersion + 1;
                },
            }
        });
        page.OnOpenWindow({ id: 'home', title: '主页', model: 'models_home' })
        window.onresize = function () {
            page.OnResize();
        };
        Vue.prototype.$fullScreen = function () {
            return page.full;
        };
        Vue.prototype.$open = function (id, title, model, data) {
            page.OnOpenWindow({ id: id, title: title, model: model, data: data });
        };
    </script>
</body>

</html>